.recommend-area{
  width:100%;
  height:100%;
  overflow-y:auto;
  text-align: left;
  .title{
    padding-top:.25rem;
    font-size:.26rem;
    font-weight:normal;
    color:#282c2b;
    margin-bottom:0;
    &:before{
		content:'|';
      color:#ce3d3e;
      font-weight: bold;
      padding-right:.06rem;
    }
    &:after{
      content:'>';
      color:#848a88;
      font-size:.3rem;
      padding-left:.06rem;
     }
   }
  ul{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    flex-flow:row wrap;
    list-style:none;
    li{
      padding-top:.12rem;
      flex:0 0 33%;
      width:0;
      img{
        width:100%
       }
      h2{
        font-size:.18rem;
        font-weight:normal;
        color:#2a2e2d;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
        line-height:1.5;
        margin:0 .08rem;
       }
      p{
        font-size:.12rem;
        font-weight:normal;
        color:#838987;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:1;
        overflow:hidden;
        line-height:1.2;
        margin:0 5px;
       }
      }
     }
}


